<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="header-title">系统管理</text>
      <text class="header-subtitle">明渠智侧</text>
    </view>
    
    <!-- 功能模块区域 -->
    <view class="modules-container">
      <!-- 平台服务器模块 -->
      <view class="module-card" @click="navigateTo('platform')">
        <view class="module-icon">
          <uni-icons type="paperclip" size="36"></uni-icons>
        </view>
        <view class="module-content">
          <text class="module-title">切换平台服务器</text>
          <text class="module-desc">配置和切换系统服务器连接</text>
          <!-- <text class="module-status">当前: 主服务器</text> -->
        </view>
        <view class="module-arrow">›</view>
      </view>
      
      <!-- 设置访问权限模块 -->
      <view class="module-card" @click="navigateTo('permission')">
        <view class="module-icon">
          <uni-icons type="locked" size="36"></uni-icons>
        </view>
        <view class="module-content">
          <text class="module-title">设置访问权限</text>
          <text class="module-desc">管理用户权限和访问控制</text>
          <!-- <text class="module-status">权限等级: 管理员</text> -->
        </view>
        <view class="module-arrow">›</view>
      </view>
      
      <!-- 修改终端参数模块 -->
      <view class="module-card" @click="navigateTo('terminal')">
        <view class="module-icon">
          <uni-icons type="gear" size="36"></uni-icons>
        </view>
        <view class="module-content">
          <text class="module-title">修改终端参数</text>
          <text class="module-desc">配置终端设备和系统参数</text>
          <!-- <text class="module-status">终端数: 12</text> -->
        </view>
        <view class="module-arrow">›</view>
      </view>
      
      <!-- 清理数据记录模块 -->
      <view class="module-card" @click="navigateTo('cleanup')">
        <view class="module-icon">
          <uni-icons type="trash" size="36"></uni-icons>
        </view>
        <view class="module-content">
          <text class="module-title">清理数据记录</text>
          <text class="module-desc">清理历史数据和系统日志</text>
          <!-- <text class="module-status">存储使用: 78%</text> -->
        </view>
        <view class="module-arrow">›</view>
      </view>
    </view>
    
    <!-- 底部信息 -->
    <view class="footer">
      <text class="footer-text">明渠智侧 · 智能数据分析平台</text>
      <text class="footer-text">冀ICP备16009060号-4A</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 可以在这里定义一些数据
      }
    },
    methods: {
      navigateTo(module) {
		  console.log('修改终端参数',module);
		  if(module == 'terminal'){
			  uni.navigateTo({
			  	url: '/pages/settings/modifyTerminalParameters'
			  });
			  return
		  }
        // 根据模块类型跳转到不同页面
        let pageMap = {
          'platform': '/pages/system/platform',
          'permission': '/pages/system/permission',
          'terminal': '/pages/system/terminal',
          'cleanup': '/pages/system/cleanup'
        };
        
        // 实际项目中取消注释以下代码
        // uni.navigateTo({
        //   url: pageMap[module]
        // });
        
        // 临时提示
        let moduleNames = {
          'platform': '未部署服务',
          'permission': '未部署服务',
          'terminal': '修改终端参数',
          'cleanup': '未部署服务'
        };
        
        uni.showToast({
          title: `${moduleNames[module]}`,
          icon: 'none',
          duration: 1000
        });
      }
    }
  }
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    padding: 30rpx;
  }
  
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40rpx 0 60rpx 0;
    padding: 40rpx 0;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
  }
  
  .header-title {
    font-size: 48rpx;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10rpx;
  }
  
  .header-subtitle {
    font-size: 28rpx;
    color: #7f8c8d;
  }
  
  .modules-container {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
    margin-bottom: 60rpx;
  }
  
  .module-card {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }
  
  .module-card:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  }
  
  .module-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30rpx;
  }
  
  .icon {
    font-size: 50rpx;
  }
  
  .module-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .module-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10rpx;
  }
  
  .module-desc {
    font-size: 26rpx;
    color: #7f8c8d;
    margin-bottom: 10rpx;
  }
  
  .module-status {
    font-size: 24rpx;
    color: #4a6cf7;
    font-weight: 500;
  }
  
  .module-arrow {
    font-size: 50rpx;
    color: #c8d6e5;
    font-weight: 100;
  }
  
  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    padding-top: 40rpx;
  }
  
  .footer-text {
    font-size: 24rpx;
    color: #95a5a6;
    line-height: 1.8;
    text-align: center;
  }
</style>
<style>
	page {
		background-color: #e1e9f0;
	}
</style>